<template>
  <div>
    <!-- //面包屑导航 -->
    <el-breadcrumb separator="/" class="header">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>出库记录</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- //查询操作 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="操作人">
          <el-input
            v-model="formInline.username"
            placeholder="操作人"
          ></el-input>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input v-model="formInline.ip" placeholder="ip地址"></el-input>
        </el-form-item>
        <el-form-item label="操作地址">
          <el-input
            v-model="formInline.location"
            placeholder="操作地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <i class="el-icon-search"></i>
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button disabled>
            <i class="el-icon-delete"></i>
            删除</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表单 -->
      <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="操作" width="150" prop="operation">
        </el-table-column>
        <el-table-column
          prop="method"
          label="方法"
          width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="params"
          label="参数"
          width="100px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="耗时" width="120" sortable prop="time">
        </el-table-column>
        <el-table-column label="操作地点" width="240" prop="location">
        </el-table-column>
        <el-table-column label="IP地址" width="160" prop="ip">
        </el-table-column>
        <el-table-column label="操作人" width="120" prop="username">
        </el-table-column>
        <el-table-column label="时间" width="155" sortable prop="createTime">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope" fixed="right">
            <el-button @click="delit(scope.row)" type="text" size="small">
              <i class="el-icon-delete"></i>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30]"
          :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        usernane: "",
        ip: "",
        location: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      //请求所需数据
    };
  },
  //钩子函数
  created() {
    this.getData();
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getData();
    },
    //点击查询
    search() {
      this.getData();
    },
    // 获取表单数据
    getData() {
      this.$http.get("/log/findLogList", { params: this.formInline })
        .then((res) => {
          this.total=res.data.data.total
          this.tableData = res.data.data.rows;
          console.log(res.data.data);
        });
    },
    //选择项发生变化
    handleSelectionChange() {},
    //删除操作
    delit(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("/log/delete/" + row.id).then((res) => {
            console.log(res);
            if (res.status == 200) {
              const index = row.id - 1;
              this.tableData.splice(index, 1);
              this.$message({
                type: "success",
                message: res.data.msg,
              });
            } else {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang='less'>
</style>